<template>
	<view>
		<!-- 商品详情模态框 begin -->
		<modal :show="goodDetailModalVisible" class="good-detail-modal" color="#5A5B5C" width="90%" custom padding="0rpx"
		 radius="12rpx">
			<view class="cover">
				<image v-if="form.detail.product_image" :src="form.detail.product_image" class="image"></image>
				<view class="btn-group">
					<image src="/static/images/menu/close.png" @tap="closeGoodDetailModal"></image>
				</view>
			</view>
			<scroll-view class="detail" scroll-y>
				<view class="wrapper">
					<view class="good_basic">
						<view class="name">{{ form.detail.product_name }}</view>
						<view class="tips">{{ form.detail.selling_point }}</view>
					</view>
					<view class="properties">
						<view class="property" v-for="(item, index) in form.specData.spec_attr" :key="index">
							<view class="title">
								<text class="name">{{ item.group_name }}</text>
								<view class="desc" v-if="form.productSpecArr[index]==null">({{item.group_name}})</view>
							</view>
							<view class="values">
								<view class="value" @click="selectAttr(index, key)" v-for="(value, key) in item.spec_items" :key="key" :class="{'default': value.checked}" >
									{{ value.spec_value }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="action">
				<view class="left">
					<view class="price">￥{{ form.show_sku.product_price }}</view>
					<view class="props" >
						
					</view>
				</view>
				<view class="btn-group">
					<button type="default" style="border: #00cd96;" plain class="btn" size="min" hover-class="none" @click="sub()">
						<view class="iconfont iconsami-select"></view>
					</button>
					<view class="number">{{ form.show_sku.sum }}</view>
					<button type="primary" style="border: #00cd96;" class="btn" size="min" hover-class="none" @click="add()">
						<view class="iconfont iconadd-select"></view>
					</button>
				</view>
			</view>
			<view class="add-to-cart-btn" @tap="confirmFunc">
				<view>加入购物车</view>
			</view>
		</modal>
		<!-- 商品详情模态框 end -->
	</view>
</template>

<script>
	import modal from '@/components/modal/modal'
	export default{
		components:{
			modal
		},
		data(){
			return{
				/*是否可见*/
				Visible: false,
				/*表单对象*/
				form: {
					detail: {
				
					},
					show_sku: {
						sku_image: ''
					}
				},
				/*当前商品总库存*/
				stock: 0,
				/*选择提示*/
				selectSpec: '',
				/*是否打开过多规格选择框*/
				isOpenSpec: false,
				type: ''
			}
		},
		props:["goodDetailModalVisible",'productModel'],
		computed: {
		
			/*判断增加数量*/
			isadd: function() {
				return this.form.show_sku.sum >= this.stock || this.form.show_sku.sum >= this.form.detail.limit_num;
			},
		
			/*判断减少数量*/
			issub: function() {
				return this.form.show_sku.sum <= 1;
			}
		},
		watch: {
			'goodDetailModalVisible': function(n, o) {
				if (n != o) {
					this.Visible = n;
					this.form = this.productModel;
					this.isOpenSpec = true;
					this.initShowSku();
					this.form.type = this.productModel.type;
				}
			},
			'form.specData': {
				handler(n, o) {
					let str = '',select='';
					this.isAll=true;
					if (n) {
						for (let i = 0; i < n.spec_attr.length; i++) {
							if (this.form.productSpecArr[i] == null) {
								this.isAll=false;
								str += n.spec_attr[i].group_name+' ';
							}else{
								n.spec_attr[i].spec_items.forEach(item=>{
									if(this.form.productSpecArr[i]==item.item_id){
										select+= '\"'+item.spec_value+'\" ';
									}
								});
							}
						}
						if(!this.isAll){
							str='请选择: '+str;
						}else{
							select='已选: '+select;
						}
					}
					this.selectSpec =this.isAll?select:str;
				},
				deep: true,
				immediate:true
			}
		},
		methods:{
			/*初始化*/
			initShowSku() {
				this.form.show_sku.sku_image = this.form.detail.image[0].file_path;
				this.form.show_sku.product_price = this.form.detail.product_price;
				this.form.show_sku.product_sku_id = 0;
				this.form.show_sku.line_price = this.form.detail.line_price;
				this.form.show_sku.stock_num = this.form.detail.product_stock;
				this.form.show_sku.sum = 1;
				this.stock = this.form.detail.product_stock;
				let self = this;
				self.form.specData.spec_attr.forEach(function(item, index){
					self.selectAttr(index, 0);
				});
			},
			changePropertyDefault(index, key) { //改变默认属性值
				this.good.property[index].values.forEach(value => this.$set(value, 'is_default', 0))
				this.good.property[index].values[key].is_default = 1
				this.good.number = 1
			},
			closeGoodDetailModal(){
				this.$emit('closeGoodDetailModal')
			},
			/*选择属性*/
			selectAttr(attr_index, item_index) {
				let self = this;
				let items = self.form.specData.spec_attr[attr_index].spec_items;
				let curItem = items[item_index];
				if (curItem.checked) {
					curItem.checked = false;
					self.form.productSpecArr[attr_index] = null;
				} else {
					for (let i = 0; i < items.length; i++) {
						items[i].checked = false;
					}
					curItem.checked = true;
					self.form.productSpecArr[attr_index] = curItem.item_id;
				}
			
				for (let i = 0; i < self.form.productSpecArr.length; i++) {
					if (self.form.productSpecArr[i] == null) {
						self.initShowSku();
						return;
					}
				}
				// 更新商品规格信息
				self.updateSpecProduct();
			},
			/*更新商品规格信息*/
			updateSpecProduct() {
				let self = this;
				let specSkuId = self.form.productSpecArr.join('_');
				// 查找skuItem
				let spec_list = self.form.specData.spec_list,
					skuItem = spec_list.find((val) => {
						return val.spec_sku_id == specSkuId;
					});
				// 记录product_sku_id
				// 更新商品价格、划线价、库存
				if (typeof skuItem === 'object') {
					self.stock = skuItem.spec_form.stock_num;
					if (self.form.show_sku.sum > self.stock) {
						self.form.show_sku.sum = self.stock > 0 ? self.stock : 1;
					}
					self.form.show_sku.product_sku_id = specSkuId;
					self.form.show_sku.product_price = skuItem.spec_form.product_price;
					self.form.show_sku.line_price = skuItem.spec_form.line_price;
					self.form.show_sku.stock_num = skuItem.spec_form.stock_num;
					if (skuItem.spec_form.image_id > 0) {
						self.form.show_sku.sku_image = skuItem.spec_form.image_path;
					} else {
						self.form.show_sku.sku_image = self.form.detail.image[0].file_path;
					}
				}
			},
			
			/*商品增加*/
			add() {
				if (this.stock <= 0) {
					return;
				}
				if (this.form.show_sku.sum >= this.stock) {
					uni.showToast({
						title: '数量超过了库存',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (this.form.show_sku.sum >= this.form.detail.limit_num) {
					uni.showToast({
						title: '数量超过了限购数量',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				this.form.show_sku.sum++;
			},
			/*商品减少*/
			sub() {
				if (this.stock <= 0) {
					return;
				}
				if (this.form.show_sku.sum < 2) {
					uni.showToast({
						title: '商品数量至少为1',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				this.form.show_sku.sum--;
			},
			/*确认提交*/
			confirmFunc() {
				console.log(this.form.productSpecArr)
				if (this.form.specData != null) {
					for (let i = 0; i < this.form.productSpecArr.length; i++) {
						if (this.form.productSpecArr[i] == null) {
							uni.showToast({
								title: '请选择规格',
								icon: 'none',
								duration: 2000
							});
							return;
						}
					}
				}
			
				if (this.form.type == 'card') {
					this.addCart();
				} else {
					this.createdOrder();
				}
			},
			/*加入购物车*/
			addCart() {
				let self = this;
				let product_id = self.form.detail.product_id;
				let total_num = self.form.show_sku.sum;
				let product_sku_id = self.form.show_sku.product_sku_id;
				if (self.form.detail.spec_type == 20 && product_sku_id == 0) {
					uni.showToast({
						title: '请选择属性',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				self._post('order.cart/add', {
					product_id: product_id,
					total_num: total_num,
					product_sku_id: product_sku_id,
				}, function(res) {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					let price = self.form.show_sku.product_price;
					self.$emit('closeGoodDetailModal',total_num,price);
				});
			},
		}
	}
</script>

<style lang="scss">
	@import '~@/pages/menu/menu.scss';
	
	.good-detail-modal {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		
	}
	.detail {
		width: 100%;
		min-height: 1vh;
		max-height: calc(90vh - 320rpx - 80rpx - 120rpx);
		.wrapper {
			width: 100%;
			height: 100%;
			overflow: hidden;
		
		}
	}
	.good_basic {
				padding: 0 20rpx 30rpx;
				display: flex;
				flex-direction: column;
				.name {
					font-size: $font-size-base;
					color: $text-color-base;
					margin-bottom: 10rpx;
				}
				.tips {
					font-size: $font-size-sm;
					color: $text-color-grey;
				}
			}
	.cover {
		height: 320rpx;
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.image {
			width: 260rpx;
			height: 260rpx;
		}
		.btn-group {
			position: absolute;
			right: 10rpx;
			top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
	.properties {
		width: 100%;
		border-top: 2rpx solid $bg-color-grey;
		padding: 10rpx 30rpx 0;
		display: flex;
		flex-direction: column;
	}
	
	.property {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
		padding-bottom: -16rpx;
		.title {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 20rpx;
			.name {
				font-size: 26rpx;
				color: $text-color-base;
				margin-right: 20rpx;
			}
			.desc {
				flex: 1;
				font-size: $font-size-sm;
				color: $color-primary;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.values {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
	
			.value {
				border-radius: 8rpx;
				background-color: $bg-color-grey;
				padding: 16rpx 30rpx;
				font-size: 26rpx;
				color: $text-color-assist;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
	
				&.default {
					background-color: $color-primary;
					color: $text-color-white;
				}
			}
		}
	}
	.action {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: $bg-color-grey;
		height: 120rpx;
		padding: 0 26rpx;
		.left {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-right: 20rpx;
			overflow: hidden;
			.price {
				font-size: $font-size-lg;
				color: $text-color-base;
			}
			.props {
				color: $text-color-assist;
				font-size: 24rpx;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.btn-group {
			display: flex;
			align-items: center;
			justify-content: space-around;
			.number {
				font-size: $font-size-base;
				width: 44rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
			}
			.btn {
				padding: 0;
				font-size: $font-size-base;
				width: 44rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 100%;
			}
		}
	}
	
	.add-to-cart-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $color-primary;
		color: $text-color-white;
		font-size: $font-size-base;
		height: 80rpx;
		border-radius: 0 0 12rpx 12rpx;
	}
	.btn-group .iconsami-select{
		border: #f5a654;
		color: #f5a654;
	}
	.btn-group .iconadd-select{
		background-color:#f5a654;
		color: #FFFFFF;
	}
</style>
